import "./ProductList.css"

import { useState, useEffect } from 'react'
import { FixedSizeList } from "react-window"
import { useNavigate } from "react-router-dom"
import { Avatar, Divider, List, Skeleton } from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';

export default (props) => {

    const [loading, setLoading] = useState(false);
    console.log("props", props.goodList);
    const navigate = useNavigate()



    // const loadMoreData = () => {
    //     if (loading) {
    //       return;
    //     }
    //     setLoading(true);
    //     fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo')
    //       .then((res) => res.json())
    //       .then((body) => {
    //         setData([...data, ...body.results]);
    //         setLoading(false);
    //       })
    //       .catch(() => {
    //         setLoading(false);
    //       });
    //   };

    useEffect(() => {
        // loadMoreData();
    }, [])




    const productDetails = (id) => {
        console.log("点击了");
        navigate(`/maSearch?id=${id}`)
    }

    return (
        <div className="product">
            <div className="infinite-list">
              
                {props.goodList.map((item, i) => {
                    return (
                        <div className="product-item  infinite-list-item" key={i}
                            onClick={()=>{productDetails(item.Id)}}>
                            <div className="product-img">
                                <div className="demo-image__lazy">
                                    <img src={item.imageUrl} alt="" />
                                </div>

                            </div>
                            <h4>{item.title}</h4>
                            <p className="priceStr">
                                <span id="priceStr">￥{item.priceStr}</span>
                                <span id="mack" dangerouslySetInnerHTML={{ __html: item.mack }}></span>
                            </p>
                        </div>
                    )
                })
                }


            </div>
        </div >



    )
}